import * as echarts from "echarts";

// 混凝土试块试压数据
var pressureData = [
  { time: 0, pressure: 0 },
  { time: 1, pressure: 5 },
  { time: 2, pressure: 8 },
  { time: 3, pressure: 12 },
  { time: 4, pressure: 15 },
  { time: 5, pressure: 18 },
  { time: 6, pressure: 20 },
  { time: 7, pressure: 22 },
  { time: 8, pressure: 23 },
  { time: 9, pressure: 24 },
  { time: 10, pressure: 24.5 },
  { time: 11, pressure: 24.8 },
  { time: 12, pressure: 25 },
  { time: 13, pressure: 25.1 },
  { time: 14, pressure: 25.2 },
  { time: 15, pressure: 25.3 },
];

// 配置图表选项
var option = {
  xAxis: {
    name: "时间",
    // data: pressureData.map((item) => item.time),
  },
  yAxis: {
    type: "value",
    name: " (MPa)",
  },
  dataZoom: [
    {
      show: true,
      type: "inside",
      filterMode: "none",
      xAxisIndex: [0],
      startValue: -20,
      endValue: 20,
    },
    {
      show: true,
      type: "inside",
      filterMode: "none",
      yAxisIndex: [0],
      startValue: -20,
      endValue: 20,
    },
  ],
  series: [
    {
      data: pressureData.map((item) => [item.time, item.pressure]),
      type: "line",
      showSymbol: true,
      clip: true,
      // smooth: true,
    },
  ],
  tooltip: {
    trigger: "axis",
    formatter: function (params) {
      return `Time: ${params[0].value} minutes, Pressure: ${params[0].data} MPa`;
    },
  },
};

window.addEventListener("DOMContentLoaded", function () {
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
});
